<template>
  <div class="rose-pie-chart" ref="chartContainer"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "RosePieChart",
  data() {
    return {
      information: {
        dataArray: [
          { value: 45, name: "正常" },
          { value: 32, name: "故障" },
          { value: 16, name: "报废" },
          { value: 7, name: "其他" },
        ],
      },
      chartInstance: null,
    };
  },
  methods: {
    initChart() {
      const container = this.$refs.chartContainer;
      this.chartInstance = echarts.init(container);

      const option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(9,40,84,0.8)",
          borderColor: "rgba(9,40,84,0.8)",
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
          formatter: function (params) {
            return (
              '<span style="margin-right: 5px; border-radius: 50%; display: inline-block; width:14px; height: 14px; vertical-align: middle; background:linear-gradient( ' +
              params.color.colorStops[0].color +
              ", " +
              params.color.colorStops[1].color +
              ');"></span>' +
              params.name +
              "&nbsp;&nbsp;<span style='font-weight:bold'>" +
              params.value +
              "</span>"
            );
          },
        },
        polar: {},
        angleAxis: { show: false },
        radiusAxis: { show: false },
        series: [
          {
            type: "pie",
            radius: ["16%", "17%"],
            center: ["50%", "55%"],
            emphasis: { scale: false },
            labelLine: { show: false },
            data: [{ name: "", value: 0, itemStyle: { color: "#0189cc" } }],
          },
          {
            type: "pie",
            radius: ["20%", "70%"],
            center: ["50%", "55%"],
            roseType: "area",
            label: {
              show: true,
              formatter: function (param) {
                return `{a|${param.name}} {s| ${param.percent}%}\n\n`;
              },
              padding: [0, -140],
              rich: {
                a: { color: "#fff", fontSize: "30" },
                s: { color: "#00ffff", fontSize: "28" },
              },
            },
            labelLine: {
              show: true,
              length: 30,
              length2: 150,
              lineStyle: { type: "dashed", width: 2 },
            },
            itemStyle: {
              color: function (params) {
                const colorList = [
                  { c1: "#45EAFF", c2: "#40ADAC" },
                  { c1: "#12B3F8", c2: "#7DE8FF" },
                  { c1: "#0176D3", c2: "#13B7FF" },
                  { c1: "#015BD3", c2: "#138DFF" },
                ];

                // 确保 dataIndex 在 colorList 中有效
                const colorIndex = params.dataIndex % colorList.length; // 使用取模运算确保不会越界
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: colorList[colorIndex].c1 },
                  { offset: 1, color: colorList[colorIndex].c2 },
                ]);
              },
            },

            data: this.information.dataArray,
          },
        ],
      };

      this.chartInstance.setOption(option);
      window.addEventListener("resize", this.resizeChart);
    },
    resizeChart() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    window.removeEventListener("resize", this.resizeChart);
  },
};
</script>

<style scoped>
.rose-pie-chart {
  width: 500px;
  height: 200px;
}
</style>
